<template>
    <Header />
    <div class="body-phone hidden-sm-and-up">

            <div class="flex-between items-center bdD8 pd20">
                <div class="flex-aliign-center">
                    <el-avatar class="mr-3 mr10" :size="32"
                        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                    <span class="font-600 mr-3 fz14"> 用户001 </span>
                </div>
                <div class="flex items-center">
                    <!-- <el-button>Print</el-button> -->
                    <el-button type="primary" class="ml-2">编辑</el-button>
                </div>
            </div>


            <div class="plr20" ><el-descriptions :column="1" size="default" class="mt-4 mt20">
                    <el-descriptions-item label="用户名">用户001</el-descriptions-item>
                    <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
                    <el-descriptions-item label="单位">南宁市政府</el-descriptions-item>
                    <el-descriptions-item label="性别">
                        <el-tag>男</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="邮箱">u271arwoss@gmail.com
                    </el-descriptions-item>
                </el-descriptions></div>
            <div class="flex-aliign-center pd20" style="padding-top: 0px;">
                <div class="mr10 fz14 color3D">更换头像</div>
                <el-avatar class="mr-3 mr10" :size="32"
                    src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                <el-button>立即上传</el-button>

            </div>

    </div>
    <div class="body hidden-xs-only">
        <el-page-header>

            <template #content>
                <div class="flex items-center">
                    <div class="flex-aliign-center">
                        <el-avatar class="mr-3 mr10" :size="32"
                            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                        <span class="font-600 mr-3 fz14"> 用户001 </span>
                    </div>
                </div>
            </template>
            <template #extra>
                <div class="flex items-center">
                    <!-- <el-button>Print</el-button> -->
                    <el-button type="primary" class="ml-2">编辑</el-button>
                </div>
            </template>

            <el-descriptions :column="3" class="mt-4 mt20">
                <el-descriptions-item label="用户名">用户001</el-descriptions-item>
                <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
                <el-descriptions-item label="单位">南宁市政府</el-descriptions-item>
                <el-descriptions-item label="性别">
                    <el-tag>男</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="邮箱">u271arwoss@gmail.com
                </el-descriptions-item>
            </el-descriptions>
            <div class="flex-aliign-center">
                <div class="mr10 fz14 color3D">更换头像</div>
                <el-avatar class="mr-3 mr10" :size="32"
                    src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                <el-button>立即上传</el-button>

            </div>
        </el-page-header>
    </div>
</template>

<script setup lang="ts">
    import Header from '@/components/Header.vue'
    import { ElNotification as notify } from 'element-plus'

    const onBack = () => {
        notify('返回')
    }
</script>
<style lang="scss" scoped>
    @import '@/assets/variables.scss';

    .body {
        max-width: $border-primary-max-width;
        margin: 30px auto;
    }
    .body-phone {
        max-width: $border-primary-max-width;
        margin: 0px auto;
    }

    .el-descriptions__body {
        margin-top: 20px;
    }
</style>